<template>
    <div>
        <div class="bigbox">

            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item>
                    <div class="imgleft">员工头像</div>
                    <div class="imgright">
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                            <el-icon>
                                <Plus />
                            </el-icon>

                            <template #file="{ file }">
                                <div>
                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                    <span class="el-upload-list__item-actions">
                                        <span class="el-upload-list__item-preview"
                                            @click="handlePictureCardPreview(file)">
                                            <el-icon><zoom-in /></el-icon>
                                        </span>
                                        <span v-if="!disabled" class="el-upload-list__item-delete"
                                            @click="handleDownload(file)">
                                            <el-icon>
                                                <Download />
                                            </el-icon>
                                        </span>
                                        <span v-if="!disabled" class="el-upload-list__item-delete"
                                            @click="handleRemove(file)">
                                            <el-icon>
                                                <Delete />
                                            </el-icon>
                                        </span>
                                    </span>
                                </div>
                            </template>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image" />
                        </el-dialog>
                    </div>

                </el-form-item>
                <el-form-item label="员工姓名">
                    <el-input v-model="form.name" placeholder="请输入员工姓名" />
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="form.mobile" placeholder="请输入联系方式" />
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.idCard" placeholder="请输入身份证号" />
                </el-form-item>
                <el-form-item label="所属部门">
                    <el-select  placeholder="请选择所属部门">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属岗位">
                    <el-select  placeholder="请选择所属岗位">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="form.adminUserName" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.adminPwd" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="是否是护工">
                    <el-radio-group v-model="radio1">
                        <el-radio value="1" size="large">是</el-radio>
                        <el-radio value="2" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="smallbox">
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
            
        </div>
    </div>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import { type UploadFile } from 'element-plus'
import { addemployee ,authPublicKey } from '@/apis/employee/employee'

import {SM2} from 'gm-crypto'

const radio1 = ref('1')

// 返回逻辑
const back = () => {
    window.history.back()
}

const form = reactive({
    id: 0,
    photo: '',
    name: '',
    mobile: '',
    isCarer: 0,
    departmentId: 0,
    departmentName: '',
    roles: [],
    adminUserName: '',
    adminPwd: '',
    enable: 0,
    idCard: ''
})

const submit=async()=>{
    
   // 获取公钥
    let res = await authPublicKey()
    console.log('获取公钥', res);
    // const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
    // ruleForm.pwd = sm2.doEncrypt(ruleForm.pwd, res.data, cipherMode) // 加密结果

    const publicKey = '04c874b606ef4a15521ecc592187701d6fc2279dff4cbc9fb79d0978fd88d4a70ec05de2401b2360dea044a2cdbac52e4087cd11339bc8141a1a331e1a2558b89e'; // 替换为实际的公钥

    // 使用 SM2.encrypt 方法加密密码
    const encryptedPwd = SM2.encrypt(form.adminPwd, publicKey);

    // 将加密后的密码赋值给 form 对象
    form.adminPwd = encryptedPwd;

    addemployee(form).then(res => {
        console.log(res)
    }).catch(err => {
        console.error('提交失败:', err)
    })
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
    console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
    console.log(file)
}
</script>

<style scoped>
.smallbox{
    margin-top: 20px;
    margin-left: 40%;
}
.bigbox {
    width: 100%;
    background-color: #fff;
    padding: 20px;
}

.imgleft {
    float: left;
}

.imgright {
    float: left;
    margin-left: 20px;
}
</style>